body{
    font-size: .28rem !important;
    background: rgb(245,250,250);
}
/* 导航 */
.header{
    width: 100%;
    height: 1.48rem;
    background: rgb(41,204,177);
    color: #fff;
    /* 弹性盒模型 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 固定定位 */
    position: fixed;
    left: 0;
    top: 0;
    /* 层级关系 */
    z-index: 999;
}
.header span{
    font-size: .4rem;
}
/* 按钮 */
.header button{
    /* 绝对定位 */
    position: absolute;
    left: .2rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: .5rem;
    font-family: '\5b8b\4f53';/*宋体*/
}


/* 下--主要内容 */
.main{
    width: 7.1rem;
    margin: 1.8rem auto 0;
    min-height: 6rem;
    /* border: 1px solid; */
}
/* 1/3选择身份 */
.main>.identity>.title,
.main>.grade>.title,
.main>.book>.title{
    height: .6rem;
    line-height: .6rem;
    /* background: yellowgreen; */
    border-left: .06rem solid rgb(41,204,177);
    display: flex;
    justify-content: space-between;
    color: #888;
}
.main>.identity>.title>span:nth-of-type(1),
.main>.grade>.title>span:nth-of-type(1),
.main>.book>.title>span:nth-of-type(1){
    font-size: .36rem;
    font-weight: bold;
    color: #333;
    text-indent: .1rem;
}
.main>.identity>.title>span:nth-of-type(2),
.main>.grade>.title>span:nth-of-type(2),
.main>.book>.title>span:nth-of-type(2){
    letter-spacing: -0.02rem;
}
.main>.identity>.title>span:nth-of-type(2)>span:nth-of-type(1),
.main>.grade>.title>span:nth-of-type(2)>span:nth-of-type(1),
.main>.book>.title>span:nth-of-type(2)>span:nth-of-type(1){
    color: rgb(41,204,177);
}
/* 选项区 */
.radio_item{
    width: 100%;
    height: 3rem;
    /* box-shadow: 0 0 3px #999; */
    margin: .2rem auto;
}

/* 
    重点：自定义单选按钮样式--三部曲 
*/

/* 
    1.隐藏原生单选按钮 
        属性选择器input[type="radio"]
*/
input[type="radio"]{
    display: none;
}
/* 
    2.设置关联标签选中样式 
        1）:checked伪类选择器，选择已经被选中的按钮项
        2）+相邻兄弟选择器
*/
input[type="radio"]:checked+label{
    color: rgb(41,204,177);
    border-color: rgb(41,204,177);
    background: rgba(41,204,177,.1);
}
/* 3.设置关联标签正常状态下样式 */
input[type="radio"]+label{
    display: block;
    width: inherit;
    height: inherit;
    background: #fff;
    border-radius: .12rem;
    border: 1px solid transparent;
    /* 相对定位 */
    position: relative;
    /* 弹性盒模型 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: rgb(41,204,177);
}
input[type="radio"]+label>img{
    position: absolute;
    bottom: 0;
    right: .4rem;
}
img[name="student"]{
    width: 2.4rem;
}
img[name="teacher"]{
    width: 1.5rem;
}
/* 内部文本 */
input[type="radio"]+label>p{
    text-indent: .2rem;
}
input[type="radio"]+label>p:nth-of-type(1){
    font-size: .4rem;
    font-weight: bold;
}


/* 2/3选择年级 */
.main>.grade{
    margin-top: .6rem;
}
/* 2/3选择年级--下---内容 */
.main>.grade>.content>div{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    line-height: .6rem;
    text-align: center;
}
.main>.grade>.content>h2,
.main>.book>.content>h2{
    font-size: .32rem;
    font-weight: bold;
    text-indent: .36rem;
    margin: .3rem 0 .2rem 0;
}
.main>.grade>.content>div>label{
    display: block;
    width: 1.6rem;
    height: .6rem;
    margin: .12rem .06rem;
}

/*  3/3选择教材---书本 */
.main>.book{
    margin-top: .6rem;
}
.main>.book>.content>div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main>.book>.content>div>input[type="radio"]+label{
    display: inline-block;
    width: 80px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 注册按钮 */
.register{
    display: block;
    width: 7.1rem;
    margin: .8rem auto .6rem;
    height: 1rem;
    background: rgb(41,204,177);
    border: none;
    outline: none;
    color: #fff;
    border-radius: .12rem;
    font-size: .32rem;
}